<template>
    <div>
        <Title :title="title"></Title>
        <!-- 1.提供图表容器 -->
        <div ref="left2" style="height: 120px;"></div>
    </div>
</template>
<script>
//2.引入饼状图
import { Pie } from '@antv/g2plot';
//
import { get } from '@/utils/request';

export default {
    data() {
        return {
            title: '设备状态分布',
            //存放设备数据数组
            empData:[]
        }
    },
    methods: {
        //封装加载饼图的函数
        loadPie() {
           

            const piePlot = new Pie(this.$refs.left2, {
                appendPadding: 10,
                data:this.empData,
                angleField: 'value',
                colorField: 'type',
                color: ({ type }) => {
                    if (type === '在线') {
                        return 'pink';
                    }
                    return 'yellow';
                },
                radius: 0.8,
                label: {
                    type: 'outer',
                    content: '{name} {value}个',
                    style: {
                        fill: 'white'
                    }
                },
                //设置图例
                legend: {
                    position: 'top',
                    //设置图例文本
                    itemName: {
                        style: {
                            fill: 'white'
                        }
                    }
                },
                interactions: [{ type: 'pie-legend-active' }, { type: 'element-active' }],
            });

            piePlot.render();

        },
        //封装一个get请求
        async getEmpData(){
            let res= await get('/dashboard/queryDeviceOnlineNumber')
            // console.log(res,"111111");
            //将后端获取的设备数据设置给empData
            this.empData = res.data;
        }
    },
    async mounted() {
        await this.getEmpData();
        this.loadPie();
    },
}
</script>
<style scoped></style>